<template>
  <div>
    <h3>这里是{{webName}}网站的头部</h3>
    <h4>今年创立了{{age}}年</h4>
    <a :href="href">网址</a>
  </div>
</template>

<script>
export default {
  name: 'MyHeader',
  data () {
    return {

    }
  },
  /* 在组件中声明属性名，调用组件时给这个属性赋值即可 */
  /* 自定义属性名使用驼峰命名法，符合js的命名要求，但是html中不区分大小写，所以在调用组件的属性时，应该拼写为减号隔开的两个单词。 */
  // props: ['webName']
  props: {
    webName: {
      default: '京东'/* 如果没有设置web-name属性的值，则使用默认值 */
    },
    age: {
      type: Number /* 限制age属性的值只能是数字类型 */
    },
    href: {
      required: true/* 该属性必填 */
    }
  }
}
</script>

<style scoped>

</style>
